<script setup lang="ts">
import {ref} from 'vue'
import LockCover from './LockCover.vue'
import NavigateTray from './NavigateTray.vue'

const props = defineProps({
  tray: {type: Array, required: true},
  defaultLock: {type: Boolean},
})

const emit = defineEmits<{
  (event: 'changeDefaultLock', res: boolean): void
}>()

const pageLock = ref(false)

const handle_validate = (res: boolean) => {
  if (res)
    pageLock.value = false
  console.log(props.defaultLock)
  emit('changeDefaultLock', false)
}

const toggle_page_lock = () => {
  if (!pageLock.value)
    pageLock.value = true
}
</script>

<template>
  <LockCover :is-locked="pageLock || props.defaultLock" @validate="handle_validate"/>
  <NavigateTray :fns="props.tray" @toggle-lock="toggle_page_lock"/>
</template>

<style lang="less" scoped>
@import "../assets/style/theme/default-vars.less";
</style>
